<template>
  <view class="login-container">
    <!-- 背景动画与装饰元素 -->
    <view class="bg-decoration">
      <!-- 波浪背景 -->
      <view class="wave-container">
        <view class="wave wave1"></view>
        <view class="wave wave2"></view>
      </view>

      <!-- 装饰元素 -->
      <view class="leaf leaf1"></view>
      <view class="leaf leaf2"></view>
      <view class="leaf leaf3"></view>
      <view class="leaf leaf4"></view>
      <view class="circle-decoration circle1"></view>
      <view class="circle-decoration circle2"></view>
      <view class="circle-decoration circle3"></view>
    </view>

    <!-- 主内容区域 -->
    <view class="content-area" :class="{'content-show': contentLoaded}">
      <!-- 龙川文化logo与标题 -->
      <view class="logo-box">
        <view class="logo-container">
          <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
          <view class="logo-shine"></view>
        </view>
        <text class="title">LC云游记忆馆</text>
        <view class="subtitle-box">
          <text class="subtitle">传承非遗</text>
          <view class="subtitle-dot"></view>
          <text class="subtitle">弘扬文化</text>
        </view>
      </view>

      <!-- 表单区域 -->
      <view class="form-box">
        <view class="corner-decoration"></view>

        <!-- 登录/注册标签页 -->
        <view class="tab-box">
          <view
              class="tab-item"
              :class="{ active: activeTab === 'login' }"
              @click="switchTab('login')"
          >登录</view>
          <view
              class="tab-item"
              :class="{ active: activeTab === 'register' }"
              @click="switchTab('register')"
          >注册</view>
          <view
              class="tab-slider"
              :style="{left: activeTab === 'login' ? '0' : '50%'}"
          ></view>
        </view>

        <!-- 表单内容 -->
        <view class="form-content">
          <view class="input-group">
            <!-- 账号输入框 -->
            <view class="input-item">
              <uni-icons type="person" size="20" color="#2e9061"></uni-icons>
              <input
                  class="input"
                  type="text"
                  v-model="form.account"
                  placeholder="请输入账号"
              />
            </view>

            <!-- 密码输入框 -->
            <view class="input-item">
              <uni-icons type="locked" size="20" color="#2e9061"></uni-icons>
              <input
                  class="input"
                  :type="showPassword ? 'text' : 'password'"
                  v-model="form.password"
                  placeholder="请输入密码"
              />
              <uni-icons
                  :type="showPassword ? 'eye' : 'eye-slash'"
                  size="20"
                  color="#999"
                  @click="showPassword = !showPassword"
              ></uni-icons>
            </view>

            <!-- 注册附加表单 -->
            <template v-if="activeTab === 'register'">
              <view class="input-item">
                <uni-icons type="locked" size="20" color="#2e9061"></uni-icons>
                <input
                    class="input"
                    :type="showPassword ? 'text' : 'password'"
                    v-model="form.confirmPassword"
                    placeholder="请再次输入密码"
                />
              </view>

              <view class="input-item">
                <uni-icons type="person-filled" size="20" color="#2e9061"></uni-icons>
                <input
                    class="input"
                    type="text"
                    v-model="form.name"
                    placeholder="请输入昵称"
                />
              </view>
            </template>
          </view>

          <!-- 提交按钮 -->
          <button
              class="submit-btn"
              :class="{'btn-loading': isSubmitting}"
              @click="handleSubmit"
          >
            <text v-if="!isSubmitting">{{ activeTab === 'login' ? '登 录' : '注 册' }}</text>
            <view v-else class="loading-dots">
              <view class="dot"></view>
              <view class="dot"></view>
              <view class="dot"></view>
            </view>
            <view class="btn-shadow"></view>
          </button>

          <!-- 用户协议提示 -->
          <view class="tips">
            <text>登录即代表同意</text>
            <text class="link">《用户协议》</text>
            <text>和</text>
            <text class="link">《隐私政策》</text>
          </view>

          <!-- 快捷功能 -->
          <!-- <view class="quick-actions">
             <text class="action-link">忘记密码?</text>
             <text class="action-link" @click="switchTab(activeTab === 'login' ? 'register' : 'login')">
               {{ activeTab === 'login' ? '注册新账号' : '返回登录' }}
             </text>
           </view> -->
        </view>
      </view>

      <!-- 底部版权信息 -->
      <view class="copyright">
        <text>LC云游记忆馆 © 2025</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import userApi from '../../utils/api/user'

// 响应式数据
const activeTab = ref('login')
const showPassword = ref(false)
const form = ref({
  account: 'admin',
  password: '1234',
  confirmPassword: '',
  name: '',
  gender: 0,
  avatar: '',
  signature: ''
})
const contentLoaded = ref(false)
const isSubmitting = ref(false)

// 页面加载动画
onMounted(() => {
  setTimeout(() => {
    contentLoaded.value = true
  }, 300)
})

// 切换标签
const switchTab = (tab) => {
  if (activeTab.value!== tab) {
    activeTab.value = tab
  }
}

// 处理提交
const handleSubmit = async () => {
  // 表单验证
  if (!form.value.account) {
    return uni.showToast({
      title: '请输入账号',
      icon: 'none'
    })
  }

  if (!form.value.password) {
    return uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
  }

  if (activeTab.value === 'register') {
    if (form.value.password!== form.value.confirmPassword) {
      return uni.showToast({
        title: '两次密码输入不一致',
        icon: 'none'
      })
    }

    if (!form.value.name) {
      return uni.showToast({
        title: '请输入昵称',
        icon: 'none'
      })
    }

    try {
      isSubmitting.value = true

      const result = await userApi.register({
        account: form.value.account,
        password: form.value.password,
        name: form.value.name,
        gender: form.value.gender,
        avatar: form.value.avatar,
        signature: form.value.signature
      })

      isSubmitting.value = false
      uni.showToast({
        title: '注册成功，请登录',
        icon: 'none'
      })

      // 注册成功后切换到登录页
      activeTab.value = 'login'
    } catch (error) {
      isSubmitting.value = false
      console.error('注册失败', error)
    }
  } else {
    // 登录逻辑
    try {
      isSubmitting.value = true

      const result = await userApi.login({
        account: form.value.account,
        password: form.value.password
      })

      // 存储令牌和用户信息
      uni.setStorageSync('token', result.token || '')
      uni.setStorageSync('userInfo', result.userInfo || result)

      isSubmitting.value = false
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 延迟跳转到首页
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 1500)
    } catch (error) {
      isSubmitting.value = false
      console.error('登录失败', error)
    }
  }
}
</script>


<style scoped lang = "scss">
.login-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fdfa 0%, #e8f5ee 100%);

  // 背景装饰元素
  .bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;

    // 波浪背景
    .wave-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40%;
      overflow: hidden;

      .wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        height: 100%;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%232e9061" fill-opacity="0.1" d="M0,256L48,240C96,224,192,192,288,181.3C384,171,480,181,576,181.3C672,181,768,171,864,181.3C960,192,1056,224,1152,229.3C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
        background-repeat: repeat-x;
        animation: wave 20s linear infinite;

        &.wave1 {
          z-index: 1;
          animation-duration: 20s;
          opacity: 0.3;
        }

        &.wave2 {
          z-index: 2;
          animation-direction: reverse;
          animation-duration: 15s;
          bottom: -10%;
          opacity: 0.2;
        }
      }
    }

    // 装饰叶子
    .leaf {
      position: absolute;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%232e9061" fill-opacity="0.15" d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z" /></svg>');
      background-repeat: no-repeat;
      background-size: contain;
      width: 80rpx;
      height: 80rpx;
      opacity: 0.6;
      animation: float 10s infinite ease-in-out;

      &.leaf1 {
        top: 15%;
        left: 10%;
        transform: rotate(45deg);
        animation-delay: 0s;
      }

      &.leaf2 {
        top: 40%;
        right: 5%;
        transform: rotate(-30deg);
        animation-delay: 2s;
      }

      &.leaf3 {
        bottom: 25%;
        left: 8%;
        transform: rotate(10deg);
        animation-delay: 3s;
      }

      &.leaf4 {
        top: 10%;
        right: 15%;
        transform: rotate(-60deg);
        animation-delay: 1s;
      }
    }

    // 装饰圆形
    .circle-decoration {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(46, 144, 97, 0.1) 0%, rgba(46, 144, 97, 0.05) 100%);
      animation: float 15s infinite ease-in-out;

      &.circle1 {
        width: 300rpx;
        height: 300rpx;
        top: -100rpx;
        left: -100rpx;
        animation-delay: 0s;
      }

      &.circle2 {
        width: 400rpx;
        height: 400rpx;
        top: 60%;
        right: -120rpx;
        animation-delay: 2s;
      }

      &.circle3 {
        width: 250rpx;
        height: 250rpx;
        bottom: 30%;
        left: 15%;
        animation-delay: 3s;
        opacity: 0.3;
      }
    }
  }

  // 内容区域
  .content-area {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30rpx);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    height: 100%;

    &.content-show {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Logo区域
  .logo-box {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo-container {
      position: relative;
      width: 180rpx;
      height: 180rpx;

      .logo {
        width: 100%;
        height: 100%;
        border-radius: 30rpx;
        box-shadow: 0 10rpx 30rpx rgba(46, 144, 97, 0.3);
        animation: pulse 3s infinite;
      }

      .logo-shine {
        position: absolute;
        top: -10%;
        left: -10%;
        width: 120%;
        height: 120%;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
        border-radius: 30rpx;
        z-index: 1;
        transform: rotate(-45deg);
        animation: shine 5s infinite;
        opacity: 0;
      }
    }

    .title {
      font-size: 48rpx;
      font-weight: bold;
      color: #2e9061;
      margin-top: 30rpx;
      text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
      letter-spacing: 2rpx;
      background: linear-gradient(to right, #2e9061, #3eaf7c);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .subtitle-box {
      display: flex;
      align-items: center;
      margin-top: 16rpx;

      .subtitle {
        font-size: 28rpx;
        color: #828282;
        letter-spacing: 2rpx;
      }

      .subtitle-dot {
        width: 6rpx;
        height: 6rpx;
        border-radius: 50%;
        background-color: #2e9061;
        margin: 0 16rpx;
      }
    }
  }

  // 表单区域
  .form-box {
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    margin-top: 40rpx;
    box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;

    // 装饰角落
    .corner-decoration {
      position: absolute;
      top: 0;
      right: 0;
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(135deg, transparent 50%, rgba(46, 144, 97, 0.1) 50%);
    }

    // 标签栏
    .tab-box {
      display: flex;
      margin-bottom: 50rpx;
      position: relative;

      .tab-item {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        color: #666;
        padding-bottom: 20rpx;
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;

        &.active {
          color: #2e9061;
          font-weight: bold;
        }
      }

      .tab-slider {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 4rpx;
        background: linear-gradient(to right, #2e9061, #3eaf7c);
        border-radius: 2rpx;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }

    // 表单内容区
    .form-content {
      position: relative;
      margin-top: 20rpx;
    }

    // 输入表单组
    .input-group {
      .input-item {
        display: flex;
        align-items: center;
        height: 100rpx;
        background-color: #f8f8f8;
        border-radius: 16rpx;
        padding: 0 30rpx;
        margin-bottom: 30rpx;
        transition: all 0.3s ease;

        &:focus-within {
          background-color: #f0f8f4;
          box-shadow: 0 4rpx 15rpx rgba(46, 144, 97, 0.1);
          transform: translateY(-2rpx);
        }

        .uni-icons {
          margin-right: 20rpx;
        }

        .input {
          flex: 1;
          height: 100%;
          font-size: 30rpx;
        }
      }
    }

    // 提交按钮
    .submit-btn {
      position: relative;
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: linear-gradient(135deg, #2e9061, #3eaf7c);
      color: #fff;
      border-radius: 16rpx;
      font-size: 32rpx;
      font-weight: 500;
      margin-top: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 10rpx 20rpx rgba(46, 144, 97, 0.3);
      transition: all 0.3s ease;
      overflow: hidden;
      z-index: 1;

      &:active {
        transform: translateY(3rpx);
        box-shadow: 0 5rpx 10rpx rgba(46, 144, 97, 0.2);
      }

      &.btn-loading {
        background: linear-gradient(135deg, #3eaf7c, #2e9061);
      }

      // 按钮阴影效果
      .btn-shadow {
        position: absolute;
        bottom: -5rpx;
        left: 5%;
        width: 90%;
        height: 10rpx;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.1);
        filter: blur(3rpx);
        z-index: -1;
      }

      .loading-dots {
        display: flex;
        justify-content: center;
        align-items: center;

        .dot {
          width: 10rpx;
          height: 10rpx;
          background-color: #fff;
          border-radius: 50%;
          margin: 0 6rpx;
          animation: loading 1.4s infinite ease-in-out both;

          &:nth-child(1) {
            animation-delay: -0.32s;
          }

          &:nth-child(2) {
            animation-delay: -0.16s;
          }
        }
      }
    }

    // 用户协议提示
    .tips {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      margin-top: 30rpx;

      .link {
        color: #2e9061;
      }
    }

    // 快捷功能链接
    .quick-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;

      .action-link {
        font-size: 26rpx;
        color: #2e9061;
        opacity: 0.8;
        transition: all 0.3s ease;

        &:active {
          opacity: 1;
          transform: scale(1.05);
        }
      }
    }
  }

  // 底部版权信息
  .copyright {
    font-size: 22rpx;
    color: #999;
    margin-bottom: 30rpx;
    margin-top: auto;
    text-align: center;
  }
}

// 关键帧动画
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes shine {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-45deg);
  }
  15% {
    opacity: 0.5;
  }
  30% {
    opacity: 0;
    transform: translateX(100%) rotate(-45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(-45deg);
  }
}

@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1.0);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}
</style>
